<template>
  <a-drawer v-model:open="open" width="50%"
           :footer="null"
           style="top: 20px"
           title="组名维护"
           :keyboard="false"
           :mask-closable="false"
            @close="handleClose"
           @cancel="handleClose">
  <div>
     <div class="mb10"><a-button type="primary" size="small" :loading="addLoading" @click="handleAddJob"> <template
         #icon><PlusOutlined/> </template>新增</a-button></div>
      <a-table
              :columns="columns"
               rowClassName="items"
               :loading="tableLoading"
               rowKey="id"
               :pagination="false"
               :data-source="tableData"
               style="height:calc(100vh - 215px)"
               size="small"  bordered>
        <template #bodyCell="{ column,text,record,index }">
          <template v-if="column.dataIndex==='zuMing'">
            <a-input v-model:value="record.zuMing" placeholder="请填写" maxlength="100"></a-input>
          </template>
          <template v-if="column.dataIndex==='beiZhu'">
            <a-input v-model:value="record.beiZhu"  placeholder="请填写" maxlength="100"></a-input>
          </template>
          <template v-if="column.dataIndex==='zunum'">
            <span>{{record.zunum || 0}}</span>
          </template>
          <template v-if="column.dataIndex==='operation'">
            <span class="mr5" v-if="record.id">
              <a-button type="primary"  size="small" @click="handleSaveUpdate(record)"> <template
                  #icon><EditOutlined style="font-size:12px"/></template>编辑</a-button>
            </span>
            <a-popconfirm title="你确定删除吗?"  @confirm="handleDelete(record.id)" v-if="record.id">
              <a-button type="primary"  size="small" danger>
                <template #icon>
                  <CloseOutlined
                      style="font-size:12px"/>
                </template>
                删除
              </a-button>
            </a-popconfirm>
            <span class="mr5" v-if="!record.id">
              <a-button type="primary"  size="small" @click="handleSaveUpdate(record)"> <template
                  #icon><PlusOutlined  style="font-size:12px"/></template>保存</a-button>
            </span>
            <span class="mr5" v-if="!record.id">
             <a-button type="primary"  size="small" danger @click="handleDeleteItem(index)">
                <template #icon>
                  <CloseOutlined
                      style="font-size:12px"/>
                </template>
                删除
              </a-button>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </a-drawer>
</template>
<script setup>
const open = ref(false)
const tableLoading = ref(false)
const tableData = ref([]);
const emits = defineEmits(["success"])
const columns = [
  {title: '组名', dataIndex: 'zuMing',align:"center",customRender:({text,record,index})=>index+1},
  {title: '备注', dataIndex: 'beiZhu',align:"center"},
  {title: '组内船员数量', dataIndex: 'zunum',align:"center", width: 200},
  {
    title: '操作',
    dataIndex: 'operation',
    align: "center",
    width:200,
  },
];


/**
 * 查询列表数据
 */
const handleLoadData = async ()=>{
  tableLoading.value = true
  const resp = await useLoadChuanYuanFenzuApi()
  tableLoading.value = false
  tableData.value = resp.data
}

// 删除
const handleDelete = async (id) => {
  try {
    await useDelChuanYuanFenzuApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData()
  }catch (e){
    useMessage().error(e.msg)
  }
}

// 修改值
const handleSaveUpdate = async(record)=>{
  const resp = await useSaveUpdateChuanYuanFenzuApi(record)
  useMessage().success("操作成功!")
  handleLoadData()
}

// 添加项
const handleAddJob = ()=>{
  tableData.value.unshift([])
}

const handleDeleteItem = (index)=>{
  tableData.value.splice(index,1)
}

const handleClose = ()=>{
  open.value = false;
  emits("success")
}

const handleOpen = ()=>{
  open.value = true;
  handleLoadData()
}

defineExpose({
  handleOpen
})
</script>

